<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3</title>
		<link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"/>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			body{
				background-color: #c6c6c6;
			}
			header{
				background-color: black;
				padding: 0px 0px 0px 20px;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			header #logo{
				height: 50px;
				line-height: 50px;
			}
			header #logo img{
				height: 30px;
				vertical-align: middle;
			}
			header ul{
				list-style: none;
				display: flex;
				height: 100%;
			}
			header ul li{
				color: #dfdfdf;
				width: 100px;
				text-align: center;
				font-size: 12px;
				line-height: 50px;
			}
			header ul li i{
				margin-right: 3px;
			}
			header ul li:last-child{
				background-color: #434343;
			}
			#lub{
				height: 400px;
			}
			#lub img{
				width: 100%;
				height: 400px;
			}
			nav{
				background-color: #ffffff;
				height: 50px;
			}
			nav ul{
				height: 100%;
				width: 80%;
				list-style: none;
				/* background-color: #aac56e; */
				display: flex;
				align-items: center;
				margin: 0 auto;
			}
			nav ul li{
				flex-grow: 1;
				text-align: center;
				border-right: 1px solid #b5b5b5;
			}
			nav ul li:last-child{
				border-right: 0px ;
			}
			
			main{
				width: 80%;
				margin: 0px auto;
				/* border: 1px solid #00FFFF; */
				display: flex;
				flex-wrap: wrap;
			}
			main .item{
				width: 224px;
				margin-left: 20px;
				flex-grow: 1;
				border-radius: 5px;
				overflow: hidden;
				background-color: white;
				margin-top: 20px;
			}
			main .item img{
				width: 100%;
			}
			main .item h4{
				color: #6978ff;
				margin-bottom: 5px
			}
			
			main .item .bt p{
				font-size: 12px;
				margin-bottom: 5px;
				line-height: 20px;
			}
			main .item .bt p:first-of-type{
				color: #8d8d8d;
			}
			main .item .bt{
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<header>
			<div id="logo">
				<img src="logo.png" >
			</div>
			<ul>
				<li><i class="fa fa-edit"></i>在线编辑器</li>
				<li><i class="fa fa-code"></i>在线代码</li>
				<li><i class="fa fa-balance-scale"></i>文本比较</li>
				<li><i class="fa fa-download"></i>jQuery下载</li>
				<li><i class="fa fa-ship"></i>前端库</li>
				<li><i class="fa fa-book"></i>在线手册</li>
				<li><i class="fa fa-user"></i>登录/注册</li>
			</ul>
		</header>
		<div id="lub">
			<img src="swe.png" >
			<!-- <img src="https://www.jq22.com/img/ggc.png" > -->   <!-- 跨域问题-->
		</div>
		<nav>
			<ul>
				<li><i class="fa fa-paint-brush"></i> UI</li>
				<li><i class="fa fa-paint-brush"></i> 输入</li>
				<li><i class="fa fa-paint-brush"></i> 媒体</li>
				<li><i class="fa fa-paint-brush"></i> 导航</li>
				<li><i class="fa fa-paint-brush"></i> 其他</li>
				<li><i class="fa fa-paint-brush"></i> 网页模板</li>
				<li><i class="fa fa-paint-brush"></i> APP模板</li>
				<li><i class="fa fa-paint-brush"></i> 常用代码</li>
				<li><i class="fa fa-paint-brush"></i> 在线代码</li>
				<li><i class="fa fa-paint-brush"></i> 云服务底价</li>
			</ul>
		</nav>
		
		<main>
			<div class="item">
				<img src="2022-01-19-23-50-30.jpg" >
				<div class="bt">
					<h4>纯HTML输出的科技感炫酷个人简...</h4>
					<p>UI设计师无设计图纯HTML输出的科技感炫酷个人简历，仅支持分辨率为1920px和</p>
					<p><i class="fa fa-list-ul"></i> 布局</p>
					<div class="footet">
						<i class="fa fa-eye"></i>1428
					</div>
				</div>
			</div>
			
			<div class="item">
				<img src="2022-01-19-23-50-30.jpg" >
				<div class="bt">
					<h4>纯HTML输出的科技感炫酷个人简...</h4>
					<p>UI设计师无设计图纯HTML输出的科技感炫酷个人简历，仅支持分辨率为1920px和</p>
					<p><i class="fa fa-list-ul"></i> 布局</p>
					<div class="footet">
						<i class="fa fa-eye"></i>1428
					</div>
				</div>
			</div>
			<div class="item">
				<img src="2022-01-19-23-50-30.jpg" >
				<div class="bt">
					<h4>纯HTML输出的科技感炫酷个人简...</h4>
					<p>UI设计师无设计图纯HTML输出的科技感炫酷个人简历，仅支持分辨率为1920px和</p>
					<p><i class="fa fa-list-ul"></i> 布局</p>
					<div class="footet">
						<i class="fa fa-eye"></i>1428
					</div>
				</div>
			</div>
			<div class="item">
				<img src="2022-01-19-23-50-30.jpg" >
				<div class="bt">
					<h4>纯HTML输出的科技感炫酷个人简...</h4>
					<p>UI设计师无设计图纯HTML输出的科技感炫酷个人简历，仅支持分辨率为1920px和</p>
					<p><i class="fa fa-list-ul"></i> 布局</p>
					<div class="footet">
						<i class="fa fa-eye"></i>1428
					</div>
				</div>
			</div>
			<div class="item">
				<img src="2022-01-19-23-50-30.jpg" >
				<div class="bt">
					<h4>纯HTML输出的科技感炫酷个人简...</h4>
					<p>UI设计师无设计图纯HTML输出的科技感炫酷个人简历，仅支持分辨率为1920px和</p>
					<p><i class="fa fa-list-ul"></i> 布局</p>
					<div class="footet">
						<i class="fa fa-eye"></i>1428
					</div>
				</div>
			</div>
			<div class="item">
				<img src="2022-01-19-23-50-30.jpg" >
				<div class="bt">
					<h4>纯HTML输出的科技感炫酷个人简...</h4>
					<p>UI设计师无设计图纯HTML输出的科技感炫酷个人简历，仅支持分辨率为1920px和</p>
					<p><i class="fa fa-list-ul"></i> 布局</p>
					<div class="footet">
						<i class="fa fa-eye"></i>1428
					</div>
				</div>
			</div>
			<div class="item">
				<img src="2022-01-19-23-50-30.jpg" >
				<div class="bt">
					<h4>纯HTML输出的科技感炫酷个人简...</h4>
					<p>UI设计师无设计图纯HTML输出的科技感炫酷个人简历，仅支持分辨率为1920px和</p>
					<p><i class="fa fa-list-ul"></i> 布局</p>
					<div class="footet">
						<i class="fa fa-eye"></i>1428
					</div>
				</div>
			</div>
			<div class="item">
				<img src="2022-01-19-23-50-30.jpg" >
				<div class="bt">
					<h4>纯HTML输出的科技感炫酷个人简...</h4>
					<p>UI设计师无设计图纯HTML输出的科技感炫酷个人简历，仅支持分辨率为1920px和</p>
					<p><i class="fa fa-list-ul"></i> 布局</p>
					<div class="footet">
						<i class="fa fa-eye"></i>1428
					</div>
				</div>
			</div>
			
			
		</main>
	</body>
</html>
